<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/goods/select_class.css"/>
    <script type="text/javascript">
        (function () {
            var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
            clientWidth = clientWidth || localStorage.getItem("clientWidth")
            if (clientWidth > 750)
                clientWidth = 750;
            document.documentElement.style.fontSize = clientWidth * 1 / 16 + "px";
        })();
    </script>
    <style type="text/css">
        html, body {
            height: 100%;
        }
		.select_area_main .right{background: #fff;}
		.select_area_main .left{background: #f5f5f5;}
    </style>
</head>

<body>
<div class="ptsp_top_stats"></div>
<!-- <header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon  mui-pull-left">
        <img src="../images/ptsp/left_arr_03.png" alt="">
    </a>
    <h1 class="mui-title">切换社区</h1>
</header> -->

<div class="mui-content">
    <div class="select_city"  onclick="mui.openWindow('search-ware.html','search-ware.html')">
        <input type="search" class="top_search" v-model="search_kw" placeholder="请输入商品名称搜索...">
        <i class="mui-icon mui-icon-closeempty" @click="clear_input()"></i>
    </div>

    <div class="select_area_main">
        <div class="left fl">
            <div class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <!--这里放置真实显示的DOM内容-->
                    <ul>
                        <li :class="menuItem.checked == true ? 'active':''" v-for="(menuItem,index) in menusGroup"
                            @click="changeActive(menuItem.tid)">{{menuItem.name}}
                        </li>

                    </ul>
                </div>
            </div>
        </div>
        <div class="right fl">

            <div class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <!--这里放置真实显示的DOM内容-->
                    <ul>
                        <li v-for="childrenMenuItem in childrenMenusGroup" @click="goPage(childrenMenuItem.ptid,childrenMenuItem.tid)">
                            <div class="img"><img :src="childrenMenuItem.pic" alt=""></div>
                            {{childrenMenuItem.name}}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</div>

<!--底部菜单-->
<style type="text/css">
    .mui-bar-tab .mui-tab-item.mui-active {
        color: #888888;
    }

    .bottom_nav_active span {
        color: #1c83fc;
    }
</style>
<nav class="mui-bar mui-bar-tab" style="border-top: 1px solid #d6d7dc;top: auto;">
    <a class="mui-tab-item " id='home_tab' href="shop_home.html">
				<span class="mui-icon ">
                <img src="../images/nav_12.png" width="19px;" alt="">
            	</span>
        <span class="mui-tab-label" style="color: #888888;">首页</span>
    </a>
    <a class="mui-tab-item bottom_nav_active" id='class_tab' href="select_class.html">
				<span class="mui-icon">
                <img src="../images/class_icon_03.png" width="19px;" alt="">
            </span>
        <span class="mui-tab-label" style="color: #1c83fc;">分类</span>
    </a>
    <a class="mui-tab-item" id='shop_tab' href="mingpin.html">
				<span class="mui-icon">
                <img src="../images/nav_05.png" width="19px;" alt="">
            </span>
        <span class="mui-tab-label" style="color: #888888;">名品商家</span>
    </a>
    <a class="mui-tab-item " id='car_tab' href="buyCar.html">
				<span class="mui-icon">
                <img src="../images/nav_07.png" width="19px;" alt="">
            </span>
        <span class="mui-tab-label" style="color: #888888;">购物车</span>
    </a>
    <!--<a class="mui-tab-item" id='my_tab' href="myshop.html">
				<span class="mui-icon">
                <img src="../images/nav_09.png" width="19px;" alt="">
            </span>
        <span class="mui-tab-label">我的</span>
    </a>-->
</nav>

<!--底部菜单 end-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="../js/js.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/host.config.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../sim_data/city.js"></script>
<script src="../js/tools/util.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    mui.init({
        //swipeBack: true //启用右滑关闭功能
    });
    var mask;
    var address = Storage.get('address');
    var app = new Vue({
        el: '.mui-content',
        data: {
            search_kw: '',
            active_index: 0,
            menusGroup: {},    // 子菜单组
            childrenMenusGroup: {},  // 子菜单组
        },
        methods: {
            clear_input: function () {
                this.search_kw = "";
            },
            changeActive: function (tid) {
                var menusGroup = app.menusGroup;
                // 更新当前选中的菜单项
                for (menuItem in menusGroup) {
                    var item = menusGroup[menuItem];
                    if (item.tid == tid) {
                        item.checked = true;
                    } else {
                        item.checked = false;
                    }
                }

                // 二级菜单
                $.get(url + 'api/commtype/twomenus', {bid: address.sqid, tid: tid}, function (response) {
                    var responseData = JSON.parse(response);
                    if (responseData.code == '1') {
                        var menus = responseData.data;
                        app.childrenMenusGroup = menus;
                    }
                });
            },
            goPage: function (ptid,tid) {
                host_config.localStorage.setItem(host_config.ptid ,ptid)
                host_config.localStorage.setItem(host_config.tid ,tid)
                mui.openWindow('goods_list.html');
            }
        },
        mounted: function () {
            var tid = util.GetQueryString('tid');
            if(tid){
                // 一级菜单
                $.get(url + 'api/menus/menus', {bid: address.sqid}, function (response) {
                    var responseData = JSON.parse(response);
                    if (responseData.code == '1') {
                        var menus = responseData.data;
                        for (menuItem in menus) {
                            var item = menus[menuItem];
                            if (item.tid == tid) {
                                item.checked = true;
                            } else {
                                item.checked = false;
                            }
                        }
                        
                        app.menusGroup = menus;
                        

                        // 二级菜单
                        $.get(url + 'api/commtype/twomenus', {bid: address.sqid, tid: tid}, function (response) {
                            var responseData = JSON.parse(response);
                            if (responseData.code == '1') {
                                var menus = responseData.data;
                                app.childrenMenusGroup = menus;
                            }
                        });
                    }
                });

            }else{
                // 一级菜单
                $.get(url + 'api/menus/menus', {bid: address.sqid}, function (response) {
                    var responseData = JSON.parse(response);
                    if (responseData.code == '1') {
                        var menus = responseData.data;
                        menus[0].checked = true;
//                      for (menuItem in menus) {
//                          var item = menus[menuItem];
//                          if (item.tid == tid) {
//                              item.checked = true;
//                          } else {
//                              item.checked = false;
//                          }
//                      }
                        app.menusGroup = menus;

                        // 二级菜单
                        $.get(url + 'api/commtype/twomenus', {bid: address.sqid, tid: menus[0].tid}, function (response) {
                            var responseData = JSON.parse(response);
                            if (responseData.code == '1') {
                                var menus = responseData.data;
                                app.childrenMenusGroup = menus;
                            }
                        });
                    }
                });

            }

        }
    })
    mui('.mui-bar-tab').on('tap', '.mui-tab-item', function () {
        console.log(this.href)
        mui.openWindow(this.href, this.href)
    })

    mui.plusReady(function () {
        var originalHeight = document.documentElement.clientHeight || document.body.clientHeight; //获取原始窗口的高度
        window.onresize = function () {
            var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight; //软键盘弹起与隐藏  都会引起窗口的高度发生变化
            if (resizeHeight * 1 < originalHeight * 1) { //resizeHeight<originalHeight  证明窗口被挤压了
                plus.webview.currentWebview().setStyle({
                    height: originalHeight
                });
            }
        }
    });
</script>
</body>

</html>